<template>
  <div id="app">
    <headerComponent :config="config"/>
    <router-view></router-view>
    <footerComponent :config="config"/>
  </div>
</template>
<script>
  import $ from './lib/jquery-vendor'
  import headerComponent from '@/components/common/header.vue'
  import footerComponent from '@/components/common/footer.vue'
  import config from './data/config.json'
  export default {
    name: 'app',
    data () {
      return {
        config: config
      }
    },
    components: {
      headerComponent,
      footerComponent
    }
  }
</script>

<style>
  html,body,ul,ol,li,p{margin: 0; padding: 0; border: 0}
  ul,ol,li{list-style: none;}
  a:link, a:visited, a:active { text-decoration: none; outline: 0px none;}
  a:hover { text-decoration:none;}
  a.td{text-decoration: underline}
  a{color: #333}
  i, cite, em { font-style: normal;}
  .cursor{cursor: pointer}
  .clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden;}
  .clearfix { display: inline-block;}
  .fl { float:left; display:inline;}
  .fr { float:right; display:inline;}
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #000;
    overflow: hidden;
  }
  #home .product-list ul{width: 1150px;}
  #home .product-item .item-info{width: 800px;}
  #product-shop .main{max-width: 1200px;}
  #product-shop .one .system{width: 550px;}
  #home .abouts .abouts-text{width: 750px;}
  #home .appreciation{width: 1200px;}
  #home .appre{width: 400px;}
  @media (max-width: 1024px){
    #home .product-list ul{width: 84%;}
    #home .product-item .item-info{width: 480px;}
    #home .abouts .abouts-text{left: 140px; width: 700px  }
    #home  #abouts-left{display: none}
    #home #abouts-top img{display: none}
    #home .contacts img {display: none}
    #home .contacts-text{left: 260px}
    #product-shop .header img{width: 100%}
    #product-shop .one .main{ max-width: 500px}
    #product-shop .one .system{width: 100%;}
    #home .appreciation{width: 80%;}
    #home .appre{width: 260px;}
    .fp-controlArrow.fp-prev{display: none}
    .fp-controlArrow.fp-next{display: none}
  }
  .content{min-height: 300px;}
  @-webkit-keyframes square-spin {
    25% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
      transform: perspective(100px) rotateX(180deg) rotateY(0); }

    50% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
      transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

    75% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
      transform: perspective(100px) rotateX(0) rotateY(180deg); }

    100% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
      transform: perspective(100px) rotateX(0) rotateY(0); } }

  @keyframes square-spin {
    25% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
      transform: perspective(100px) rotateX(180deg) rotateY(0); }

    50% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
      transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

    75% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
      transform: perspective(100px) rotateX(0) rotateY(180deg); }

    100% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
      transform: perspective(100px) rotateX(0) rotateY(0); } }

  .square-spin > div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: 100px;
    height: 100px;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; }
  .loading{
    position: absolute;
    z-index: 1000;
    left: 50%; margin-left: -50px;
    top: 50%; margin-top: -50px;
  }
</style>
